<template>
    <view class="sc-title" :style="{ color: color, fontSize: fontSize, fontWeight: fontWeight }">
        <slot />
    </view>
</template>

<script>
export default {
    props: {
        color: {
            type: String,
            default: "#415a6b"
        },
        fontSize: {
            type: String,
            default: "28rpx"
        },
        fontWeight: {
            type: Number || String,
            default: 500
        }
    },
    data() {
        return {};
    }
};
</script>
<style lang="scss" scoped>
.sc-title {
    font-weight: bold;
    display: inline-block;
    position: relative;
    padding-left: 20rpx;
    &:after {
        position: absolute;
        z-index: 1;
        content: "";
        left: 0;
        bottom: 4rpx;
        width: 6rpx;
        height: 32rpx;
        background-color: $color;
    }
}
</style>
